<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
			<view class="portrait-box">
				<image class="portrait" :src=" userInfo.userPhoto ||'/static/missing-face.png'"></image>
				<text class="pt-upload-btn yticon icon-paizhao"></text>
				<view class="mask" @click="editHeadPic">
					点击修改
				</view>
			</view>
		</view>
		<view class="formContain">
			<view class="invokeRow ">
				<text class="invokeLable">昵称：</text>
				<input class="invokeInput" :value="userInfo.userName"></input>
			</view>
			<view class="invokeRow ">
				<text class="invokeLable">性别：</text>
				<picker @change="bindPickerChange" :value="userInfo.userSex" style="width: 500rpx;" :range="genders" mode='selector'>
					<view class="cardSelect">{{genders[userInfo.userSex]}}</view>
				</picker>
			</view>

		</view>

		<view class="confirmBtm" @click="confirm">
			确认修改
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				allow: true,
				genders: ['保密', '男', '女'],
				showMask: false,
				modifyPath: '',
				userInfo: {
					headPic: '',
					nickName: 'alex',
					phone: '13545784512',
					newPwd: '',
					again: ''
				}
			};
		},
		onLoad(option) {
			if (option.userDetail) {
				this.userInfo = JSON.parse(option.userDetail)
			}
		},
		methods: {
			bindPickerChange(e) {
				this.userInfo.userSex = e.detail.value
			},
			confirm() {
				let that = this
				if (!that.allow) {
					return
				}
				console.log(that.modifyPath)
				that.$Request.request("/api/Usercentinfo/editUserInfo", 'POST', {
					userPhoto: that.modifyPath,
					userName: that.userInfo.userName,
					userSex: that.userInfo.userSex
				}).then(res => {
					if (res.status == 1) {
						console.log(res)
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
						that.allow = true
					}
				}).catch(err => {
					console.log(err)
					that.allow = true
				})
			},
			editHeadPic() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let file = res.tempFilePaths[0]
						this.$Request.upload({
							url: '/api/Usercentinfo/editPhoto',
							filePath: file,
							formData: null,
							name: 'headPic',
							success: function(res) {
								console.log(res)
								let data = JSON.parse(res.data)
								that.modifyPath = data.path
								that.userInfo.userPhoto = file
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.confirmBtm {
		@include textCenter(80rpx);
		letter-spacing: 0.2em;
		font-size: $uni-font-size-lg;
		width: 710rpx;
		margin: 40rpx auto;
		background-color: $themColor;
		color: #fff;
		border-radius: 10rpx;
	}



	.invokeRow {
		background-color: #ffffff;
		height: 99rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e2e2e2;
		color: #353535;
		@extend %flexVcenter;
	}

	.invokeLable {
		width: 154rpx;
	}

	.invokeInput {
		width: 550rpx;
		@extend %flexVcenter;
		align-items: center;
		padding-left: 30rpx;
	}

	.user-section {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}

		.portrait-box {
			width: 200upx;
			height: 200upx;
			border: 6upx solid #fff;
			border-radius: 50%;
			position: relative;
			z-index: 2;

			.mask {
				font-size: $uni-font-size-sm;
				position: absolute;
				top: 200upx;
				left: 35rpx;
				border-radius: 8rpx;
				z-index: 3;
				color: #fff;
				background-color: $themColor;
				@include textCenter(40rpx);
				width: 130rpx;
			}

		}

		.portrait {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.yticon {
			position: absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0, 0, 0, .4);
		}

		.pt-upload-btn {
			right: 0;
			bottom: 10upx;
		}

		.bg-upload-btn {
			right: 20upx;
			bottom: 16upx;
		}
	}
</style>
